<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <div class="table_box">
      <div class="table_header">
        <div class="search">
          <a-input-search
            placeholder="企业名称"
            style="width: 200px"
            v-model="searchData.name"
            @search="onSearch"
          />
        </div>
        <div class="btn">
          <a-button type="primary" @click="goadd"> 新增 </a-button>
        </div>
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="data"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <div slot="type" slot-scope="type">
            <a-tag
              v-for="tag in type"
              style="color: #206ef7; background: #e6f7ff; border: none"
              :key="tag"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </div>
          <div slot="operation" slot-scope="text, record">
            <a-button
              type="link"
              style="color: #1890ff"
              @click="goupdata(record)"
              ghost
            >
              编辑
            </a-button>
            <a-button
              type="link"
              style="color: red"
              @click="delData(record.id)"
              ghost
            >
              删除
            </a-button>
          </div>
        </a-table>
      </div>
      <a-modal v-model="visible" title="企业信息" on-ok="handleOk" width="60%">
          <template slot="footer">
              <a-button key="submit" type="primary" @click="onSubmit">
                保存
              </a-button>
              <a-button key="back" @click="visible=false">
                  关闭
              </a-button>
          </template>
          <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
              <a-form-model-item ref="name" label="企业名称" prop="name">
                <a-input
                  v-model="form.name"
                  placeholder="请输入企业名称"
                  @blur="
                    () => {
                      $refs.name.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="contact" label="联系人名称" prop="contact">
                <a-input v-model="form.contact" placeholder="请输入联系人名称" />
              </a-form-model-item>
              <a-form-model-item
                ref="contact_phone"
                label="联系人电话"
                prop="contact_phone"
              >
                <a-input
                  v-model="form.contact_phone"
                  placeholder="请输入联系人电话"
                />
              </a-form-model-item>
              <a-form-model-item label="经营类型" prop="type">
                <a-checkbox-group v-model="form.type">
                  <a-checkbox value="车企" name="type">车企</a-checkbox>
                  <a-checkbox value="储能企" name="type">储能企</a-checkbox>
                  <a-checkbox value="充电桩运营商" name="type"
                    >充电桩运营商</a-checkbox
                  >
                  <a-checkbox value="保险公司" name="type">保险公司</a-checkbox>
                </a-checkbox-group>
              </a-form-model-item>
              <a-form-model-item ref="info" label="基本信息">
                <a-input v-model="form.info" placeholder="请输入基本信息" />
              </a-form-model-item>
              <a-form-model-item label="备注">
                <a-input
                  v-model="form.remarks"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                />
              </a-form-model-item>
              <!-- <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button @click="resetForm"> 取消 </a-button>
                <a-button style="margin-left: 10px" type="primary" @click="onSubmit">
                  保存
                </a-button>
              </a-form-model-item> -->
            </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { gets, del ,add,updata} from "@/services";
import { getSearchCriteria } from "@/utils/util"

export default {
  name: "Demo",
  data() {
    return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      columns: [
        {
          title: "企业名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "企业经营类型",
          dataIndex: "type",
          key: "type",
          scopedSlots: { customRender: "type" },
        },
        {
          title: "企业联系人",
          dataIndex: "contact",
          key: "contact",
        },
        {
          title: "企业联系电话",
          dataIndex: "contact_phone",
          key: "contact_phone",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      pagination: {
        pageSize: 10,
        total: 0,
      },
      loading: false,
      data: [],
      searchData:{
        name:""
      },
      visible:false,
      other: "",
      form: {
        type: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
        ],
        contact: [
          {
            required: true,
            message: "请输入联系人名称",
            trigger: "blur",
          },
        ],
        contact_phone: [
          {
            required: true,
            message: "请输入联系人电话",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择经营类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created() {
    this.fetch({ limit: 10 });
  },
  methods: {
      onSubmit(){
          let _this = this;
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
                let fun =_this.form.id?updata:add
              fun(_this.form,'enterprises').then(({ data }) => {
                if (data.code == 20000) {
                  _this.resetForm();
                } else {
                  _this.$message.error("修改失败");
                }
              });
            } else {
              console.log("error submit!!");
              return false;
            }
          });
      },
      resetForm(){
          this.visible= false
          this.fetch({limit:10})
      },
    handleTableChange(pagination, filters) {
      console.log(pagination, filters);
      this.pagination = { ...this.pagination, current: pagination.current };
      this.fetch({
        page: pagination.current,
        limit: pagination.pageSize,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      let search = getSearchCriteria(this.searchData)
      gets({
        ...params,...search
      },'enterprises').then(({ data }) => {
        if (data.code == 20000) {
          let res = data.data;
          this.data = res.data;
          this.pagination.total = res.total;
        }
        this.loading = false;
      });
    },
    delData(id) {
      let _this = this
      this.$confirm({
        title: "是否确定删除这条数据?",
        content: "数据删除后将无法恢复",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          del(id,'enterprises').then(({ data }) => {
            if (data.code == 20000) {
              _this.$message.success("删除成功");
              console.log(_this.pagination);
              let i = 0;
              if (_this.data.length == 1) {
                i = 1;
              }
              _this.fetch({ limit: 10, page: _this.pagination.current - i });
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    goadd() {
      this.visible = true
      this.form={}
    },
    goupdata(row) {
        this.visible = true
        this.form=row
    },
    onSearch() {
      this.fetch({ limit: 10 });
    },
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  border-radius: 4px;
  .table_box {
    padding: 16px 23px;
    .table_header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 24px;
    }
  }
}
</style>